<template>
  <el-header style="position: fixed;top: 0;z-index: 2;width: 100vw">
    <el-card>
      <el-form :inline="true">
        <el-form-item label="服务" style="width: 220px;">
          <el-select placeholder="请选择" v-model="searchOrder.serviceId" @change="loadOrder">
            <el-option label="" value=""></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button @click="reset">重置</el-button>
          <el-button type="primary" @click="loadOrder">查询</el-button>
        </el-form-item>
      </el-form>
      <el-menu mode="horizontal" style="border-bottom: none" @select="selectMenu">
        <el-menu-item index="">全部订单</el-menu-item>
        <el-menu-item index="unpaid">待付款</el-menu-item>
        <el-menu-item index="20">进行中</el-menu-item>
        <el-menu-item index="30">已完成</el-menu-item>
        <el-menu-item index="40">已取消</el-menu-item>
        <el-menu-item index="60">已退款</el-menu-item>
        <el-menu-item index="50">退款中</el-menu-item>
        <el-menu-item index="70">已评价</el-menu-item>
        <el-menu-item index="80">未评价</el-menu-item>
      </el-menu>
    </el-card>
  </el-header>

  <el-main style="margin-top: 132px;width: 100vw;">
    <el-card v-for="item in orderArr" style="border: lightgrey solid 2px;border-radius: 10px">
      <el-row style="margin: 5px;">
        <el-col :span="6">订单号：{{item.id}}</el-col>
        <el-col :span="6">订单状态：{{formatterStatus(item.status)}}</el-col>
        <el-col :span="6">支付状态：{{formatterPayStatus(item.payStatus)}}</el-col>
        <el-col :span="6">创建时间：{{item.createTime}}</el-col>
      </el-row>
      <el-row style="margin: 5px;">
        <el-col :span="12">服务：{{serviceFormatter(item.serviceId)}}</el-col>
        <el-col :span="12">总价：{{item.totalPrice}}</el-col>
      </el-row>
      <el-row style="margin: 5px;">
        <el-col :span="9" >
          <p v-if="item.payStatus==10 && (item.status==null || item.status=='' || item.status=='未付款')" style="color: brown;font-size: 10px;font-weight:bold;">请在订单创建后10分钟内支付</p>
        </el-col>
        <el-col :span="6">
          <el-button v-if="item.payStatus==10 && (item.status==null || item.status=='' || item.status=='未付款')" type="success" plain @click="pay(item)">支付</el-button>
        </el-col>
        <el-col :span="3">
          <el-button type="success" plain @click="addFeedback(item)" v-if="item.status!=10 && item.status!=20 && item.status!=null">评论</el-button>
        </el-col>
        <el-col :span="3">
          <el-button type="primary" plain @click="detailOrder(item)">详情</el-button>
        </el-col>
        <el-col :span="3">
          <el-button type="danger" plain @click="updateOrder(item)">删除</el-button>
        </el-col>
      </el-row>
    </el-card>
  </el-main>
  <el-dialog title="评论" v-model="feedbackVisible"
             :close-on-click-modal="false" style="width:800px;padding:40px;">
    <el-form label-position="top" label-width="80px">
      <el-row :gutter="30">
        <el-col :span="12">
          <el-form-item label="评价">
            <el-input v-model="editForm.evaluate" placeholder="请输入"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="星级">
            <el-select v-model="editForm.starRating" placeholder="请输入">
              <el-option label="一星" value="一星"></el-option>
              <el-option label="二星" value="二星"></el-option>
              <el-option label="三星" value="三星"></el-option>
              <el-option label="四星" value="四星"></el-option>
              <el-option label="五星" value="五星"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <template #footer>
      <el-button @click="handleClose">取消</el-button>
      <el-button @click="saveFeedback" type="primary">保存</el-button>
    </template>
  </el-dialog>

  <el-dialog title="订单详情" v-model="dialogVisible"
             style="width:1000px;padding:40px;" :close-on-click-modal="false">
    <el-form label-width="100px" label-position="left">
      <el-row :gutter="30">
        <el-col :span="24">
          <el-form-item label="订单号">
            <span v-text="order.id"></span>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="30">
        <el-col :span="12">
          <el-form-item label="用户">
            <span v-text="order.custName"></span>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="服务人员">
            <span v-text="order.empName"></span>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="30">
        <el-col :span="12">
          <el-form-item label="订单状态">
            <span v-text="order.status"></span>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="更新时间">
            <span v-text="order.updateTime"></span>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="30">
        <el-col :span="12">
          <el-form-item label="总价">
            <span v-text="order.totalPrice"></span>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="支付状态">
            <span v-text="order.payStatus"></span>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="30">
        <el-col :span="12">
          <el-form-item label="创建时间">
            <span v-text="order.createTime"></span>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="服务开始时间">
            <span v-text="order.startTime"></span>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="30">
        <el-col :span="24">
          <el-form-item label="备注信息">
            <span v-text="order.remark" style="word-break: break-word;"></span>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="30">
        <el-col :span="12">
          <el-form-item label="用户地址">
            <span v-text="order.custAddress"></span>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="服务">
            <span>{{serviceFormatter(order.serviceId)}}</span>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="30">
        <el-col :span="12">
          <el-form-item label="优惠券">
            <span v-text="order.couponId"></span>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="优惠券效果">
            <span v-text="order.couponEffect"></span>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="30">
        <el-col :span="12">
          <el-form-item label="退款金额">
            <span v-text="order.refundAmount"></span>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="结束时间">
            <span v-text="order.endTime"></span>
          </el-form-item>
        </el-col>
      </el-row>

    </el-form>
    <template #footer>
      <el-button @click="handleClose" type="primary">返回</el-button>
    </template>
  </el-dialog>

</template>

<script setup>
import {onMounted, ref} from "vue";
import axios from "axios";
import {ElMessage} from "element-plus";

const orderArr = ref([]);
const custInfo=ref({})
const searchOrder =ref({custId:custInfo.value.id})
const order=ref({})
const dialogVisible = ref(false);
let evaluation=ref([])

const selectMenu = async (index) => {
  if (index == 'unpaid') {
    searchOrder.value.payStatus = '10'
    await loadOrder()
    orderArr.value = orderArr.value.filter(item => item.status == null || item.status == '未付款')
    return
  }
  if (index == 70) {
    await loadOrder()
    let data = []
    for (let o of orderArr.value) {
      await loadEvaluation(o.id)
      if (evaluation.value.length > 0) {
        data.push(o)
      }
    }
    orderArr.value = data
    return
  }
  if (index == 80) {
    await loadOrder()
    let data = []
    for (let o of orderArr.value) {
      await loadEvaluation(o.id)
      if (evaluation.value.length === 0) {
        data.push(o)
      }
    }
    console.log(data)
    orderArr.value = data.filter(item=>item.status != 10 && item.status != 20 && item.status!=null)
    return
  }
  searchOrder.value.status = index
  await loadOrder()
}
const feedbackVisible=ref(false);
const editForm = ref({})

const loadEvaluation = async (id) => {
  await axios.post(BASE_URL+'/v1/feedback/select',{orderId:id})
      .then((response)=>{
        if (response.data.code==2000){
          evaluation.value=response.data.data.list
        }else {
          ElMessage.error(response.data.msg)
        }
      })
}

const loadOrder = async () => {
  await axios.post(BASE_URL+'/v1/order/select',searchOrder.value)
      .then((response)=> {
        if(response.data.code===2000) {
          orderArr.value = response.data.data
          orderArr.value=orderArr.value.filter(order=>order.showStatus!='10'
              && order.showStatus!='40'&& order.showStatus!='60'&& order.showStatus!='70')
          searchOrder.value={custId:custInfo.value.id}
        }else {
          ElMessage.error(response.data.msg)
        }
      })
}

const orderStatus=ref([])
const orderPayStatus=ref([])
const serviceArr=ref([])
onMounted(async ()=> {
  await getCust(custInfo);
  searchOrder.value={custId:custInfo.value.id}
  await loadOrder();
  await loadDictOptions(orderStatus,'OrderStatus')
  await loadDictOptions(orderPayStatus,'OrderPayStatus')
  await loadService()
})
const loadService = async () => {
  await axios.post(BASE_URL+'/v1/dsService/select',{})
      .then((response)=>{
        if (response.data.code==2000){
          serviceArr.value=response.data.data
        }else {
          ElMessage.error(response.data.msg)
        }
      })
}
const serviceFormatter = (id) => {
  if (!serviceArr.value){
    return id;
  }
  for (let s of serviceArr.value){
    if (s.id==id){
      id=s.name
    }
  }
  return id
}
const formatterStatus = (status) => {
  if (!orderStatus.value){
    return status
  }
  if (status==null){
    return '未付款'
  }
  for (let item of orderStatus.value){
    if (item.value==status){
      return item.label
    }
  }
}
const formatterPayStatus = (status) => {
  if (!orderPayStatus.value){
    return status
  }
  for (let item of orderPayStatus.value){
    if (item.value==status){
      return item.label
    }
  }
}
const reset = () => {
  searchOrder.value={custId:custInfo.value.id}
  loadOrder()
}
const detailOrder = (row) => {
  order.value=row
  dialogVisible.value=true
}
const updateOrder = async (row) => {
  if (confirm("确认要删除吗")){
    if (row.showStatus!=null){
      if (row.showStatus=='20'){
        row.showStatus='40'
      }else if (row.showStatus=='30'){
        row.showStatus='60'
      }else if (row.showStatus=='50'){
        row.showStatus='70'
      }
    }else {
      row.showStatus='10'
    }
    //10:用户删除，20:员工删除，30:管理员删除，40：用户和员工删除，50：管理员和员工删除，60：管理员和用户删除，70：管理员和用户和员工删除
    await axios.post(BASE_URL+'/v1/order/save',{id:row.id,showStatus:row.showStatus})
        .then((response)=>{
          if (response.data.code==2000){
            ElMessage.success("删除成功")
            loadOrder()
          }else {
            ElMessage.error(response.data.msg)
          }
        })
  }
}
const pay = (item) => {
  if (confirm("确认支付吗")){
    axios.post(BASE_URL+'/v1/order/save',{id:item.id,payStatus:20,status:10})
        .then((response)=>{
          if (response.data.code==2000){
            ElMessage.success("支付成功")
            loadOrder()
          }else {
            ElMessage.error(response.data.msg)
          }
        })
  }
}
const addFeedback = (row) => {
  console.log(row)
  editForm.value.orderId=row.id
  feedbackVisible.value=true
  console.log(editForm.value)
}
const saveFeedback = () => {
  axios.post(BASE_URL+'/v1/feedback/save',editForm.value)
      .then((response)=>{
        if (response.data.code==2000){
          ElMessage.success('保存成功')
          feedbackVisible.value=false
          editForm.value={}
          selectMenu(80)
        }else {
          ElMessage.error(response.data.msg)
        }
      })
}
const handleClose = () => {
  dialogVisible.value=false
}
</script>

<style scoped>

</style>